<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>年月日时分秒倒计时</title>
</head>

<body>
    <script>
        // 目标日期和时间
        var targetDate = new Date('2024-07-07T00:00:05');

        // 更新倒计时的函数
        function updateCountdown() {
            var currentDate = new Date(); // 当前日期和时间

            // 计算剩余时间
            var remainingTime = targetDate - currentDate;

            // 如果目标日期已过，则显示倒计时结束
            if (remainingTime <= 0) {
                document.getElementById('countdown').innerHTML = '倒计时结束';
                return;
            }

            // 计算剩余的天、小时、分钟和秒
            var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
            var hours = Math.floor((remainingTime / (1000 * 60 * 60)) % 24);
            var minutes = Math.floor((remainingTime / 1000 / 60) % 60);
            var seconds = Math.floor((remainingTime / 1000) % 60);

            // 格式化时间并显示在页面上
            var countdownString = '<span class="countdown-days">' + days + '天</span> ' +
                '<span class="countdown-hours">' + hours.toString().padStart(2, '0') + '日</span>:' +
                '<span class="countdown-minutes">' + minutes.toString().padStart(2, '0') + '分</span>:' +
                '<span class="countdown-seconds">' + seconds.toString().padStart(2, '0') + '秒</span>';
            document.getElementById('countdown').innerHTML = countdownString;

            // 每秒钟更新一次倒计时
            setTimeout(updateCountdown, 1000);
        }

        // 页面加载完成后开始倒计时
        window.onload = function () {
            updateCountdown();
        };



    </script>
    <div id="countdown"></div>
    <style>
        .countdown-days {
            font-weight: bold;
            color: red;
        }

        .countdown-hours {
            font-style: italic;
            color: blue;
        }

        .countdown-minutes {
            text-decoration: underline;
            color: green;
        }

        .countdown-seconds {
            font-size: 20px;
            color: orange;
        }
    </style>
</body>

</html>